<template>
  <div>
    <div v-loading="loading"
         element-loading-text="加载中...">
      <el-row :gutter="5">
        <el-col :span="4" :offset="6">
          <div class="title">
            采集结果：{{ lock ? '已采集' : '暂无' }}
          </div>
        </el-col>

        <el-col :span="3">
          <div class="title">
            <el-button :disabled="price>balance" type="primary" size="mini" @click="getGather">
              去采集
              {{ computePrice }}
            </el-button>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="title">
            上次采集时间：{{ time ? time : '暂无' }}
          </div>
        </el-col>
      </el-row>
      <h4 id="explain">{{ explain }}</h4>
    </div>
    <!--    <el-tabs v-model="activeName" :stretch="true">-->
    <!--      <el-tab-pane label="运营商原始数据" name="second">-->
    <!--        -->
    <div v-if="lock">
      <el-row :gutter="10">
        <el-col :span="6">
          <el-card :body-style="el_card_style" class="ec">
            <div slot="header" class="he">
              <span>申请信息校验</span>
            </div>
            <div class="text item" v-for="(item,index) in yysReport.user_basic">
              {{
                SQXXHY[item.key] + '：' + item.value
              }}
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card :body-style="el_card_style" class="ec">
            <div slot="header" class="he">
              <span>运营商基本信息</span>
            </div>
            <div class="text item" v-for="(item,index) in yysReport.cell_phone">
              {{
                YYSXX[item.key] + '：' + item.value
              }}
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card :body-style="el_card_style" class="ec">
            <div slot="header" class="he">
              <span>基础信息扫描</span>
            </div>
            <div class="text item" v-for="(item,index) in yysReport.basic_check_items">
              {{
                JCXXSM[item.check_item] + '：' + item.result
              }}
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-card :body-style="el_card_style" class="ec">
            <div slot="header" class="he">
              <span>申请信息审核</span>
            </div>
            <table class="sfhy">
              <tr class="data">
                <td>号码标签</td>
                <td>3个月主叫次数</td>
                <td>3个月被叫次数</td>
                <td>6个月主叫次数</td>
                <td>6个月被叫次数</td>
              </tr>
              <tr class="data" v-for="(item,index) in yysReport.call_contact_detail">
                <td>{{ item.peer_num }}</td>
                <td>{{ item.dial_cnt_3m }}</td>
                <td>{{ item.dialed_cnt_3m }}</td>
                <td>{{ item.dial_cnt_6m }}</td>
                <td>{{ item.dialed_cnt_6m }}</td>
              </tr>
            </table>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :span="24">
          <el-card :body-style="el_card_style" class="ec">
            <div slot="header" class="he">
              <span>行为检测</span>
            </div>
            <table class="sfhy">
              <tr class="data">
                <td>检测项</td>
                <td>依据</td>
                <td>结果</td>
              </tr>
              <tr class="data" v-for="item in yysReport.behavior_check">
                <td>{{ item.check_point_cn }}</td>
                <td>{{ item.evidence }}</td>
                <td>{{ item.result }}</td>
              </tr>
            </table>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :span="24">
          <el-card :body-style="el_card_style" class="ec">
            <div slot="header" class="he">
              <span>出行信息</span>
            </div>
            <table class="sfhy">
              <tr class="data">
                <td>时间</td>
                <td>出行时间</td>
                <td>离开时间</td>
                <td>出行地</td>
                <td>目的地</td>
              </tr>
              <tr class="data" v-for="item in yysReport.trip_info">
                <td>{{ item.trip_type }}</td>
                <td>{{ item.trip_start_time }}</td>
                <td>{{ item.trip_end_time }}</td>
                <td>{{ item.trip_leave }}</td>
                <td>{{ item.trip_dest }}</td>
              </tr>
            </table>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :span="24">
          <el-card :body-style="el_card_style" class="ec">
            <div slot="header" class="he">
              <span>消费充值明细</span>
            </div>
            <table class="sfhy">
              <tr class="data">
                <td>项目类型</td>
                <td>近1月</td>
                <td>近3月</td>
                <td>近6月</td>
                <td>近3月平均</td>
                <td>近6月平均</td>
              </tr>
              <tr class="data" v-for="item in yysReport.consumption_detail">
                <td>{{ item.app_point_zh }}</td>
                <td>{{ item.item.item_1m }}</td>
                <td>{{ item.item.item_3m }}</td>
                <td>{{ item.item.item_6m }}</td>
                <td>{{ item.item.avg_item_3m }}</td>
                <td>{{ item.item.avg_item_6m }}</td>
              </tr>
            </table>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :span="24">
          <el-card :body-style="el_card_style" class="ec">
            <div slot="header" class="he">
              <span>联系人手机号归属地</span>
            </div>
            <table class="sfhy">
              <tr class="data">
                <td>地区名称</td>
                <td>通话次数</td>
                <td>通话时常</td>
                <td>主叫次数</td>
                <td>主叫时长</td>
                <td>被叫次数</td>
                <td>被叫时长</td>
                <td>主叫平均时长</td>
                <td>被叫平均时长</td>
                <td>主叫次数占比</td>
                <td>主叫时长占比</td>
                <td>被叫次数占比</td>
                <td>被叫时长占比</td>
              </tr>
              <template v-for="item in yysReport.contact_region">
                <tr class="data" v-for="item_ in item.region_list">
                  <td>{{ item_.region_loc }}</td>
                  <td>{{ item_.region_uniq_num_cnt }}</td>
                  <td>{{ item_.region_call_time }}</td>
                  <td>{{ item_.region_dial_cnt }}</td>
                  <td>{{ item_.region_dialed_time }}</td>
                  <td>{{ item_.region_dialed_cnt }}</td>
                  <td>{{ item_.region_dialed_time }}</td>
                  <td>{{ item_.region_avg_dial_time }}</td>
                  <td>{{ item_.region_avg_dialed_time }}</td>
                  <td>{{ item_.region_dial_cnt_pct }}</td>
                  <td>{{ item_.region_dial_time_pct }}</td>
                  <td>{{ item_.region_dialed_cnt_pct }}</td>
                  <td>{{ item_.region_dialed_time_pct }}</td>
                </tr>
                <tr class="data">
                  <td colspan="13"> {{ item.desc }}</td>
                </tr>
                <tr class="null">
                  <td colspan="13"></td>
                </tr>
              </template>
            </table>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :span="24">
          <el-card :body-style="el_card_style" class="ec">
            <div slot="header" class="he">
              <span>近6月前三联系人</span>
            </div>
            <table class="sfhy">
              <tr class="data">
                <td>对方号码</td>
                <td>通话地</td>
                <td>号码类型</td>
                <td>号码标识</td>
                <td>通话次数</td>
                <td>通话时长(秒)</td>
                <td>主叫次数</td>
                <td>被叫次数</td>
                <td>主叫时长（秒）</td>
                <td>被叫时长（秒）</td>
              </tr>
              <template v-for="item in yysReport.friend_circle.peer_num_top_list" v-if="item.key == 'peer_num_top3_6m'">
                <tr class="data" v-for="item_ in item.top_item">
                  <td>{{ item_.peer_number }}</td>
                  <td>{{ item_.peer_num_loc }}</td>
                  <td>{{ item_.group_name }}</td>
                  <td>{{ item_.company_name }}</td>
                  <td>{{ item_.call_cnt }}</td>
                  <td>{{ item_.call_time }}</td>
                  <td>{{ item_.dial_cnt }}</td>
                  <td>{{ item_.dialed_cnt }}</td>
                  <td>{{ item_.dial_time }}</td>
                  <td>{{ item_.dialed_time }}</td>
                </tr>
              </template>
            </table>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!--      </el-tab-pane>-->
    <!--      <el-tab-pane label="运营商报告" name="first">-->
    <!--        <div v-if="lock">-->
    <!--          <table class="sfhy">-->
    <!--            <tbody>-->
    <!--            <tr class="data">-->
    <!--              <td colspan="10">用户基本信息</td>-->
    <!--            </tr>-->
    <!--            <tr class="data">-->
    <!--              <td colspan="10">-->
    <!--                <el-descriptions :column="5" border size="mini"-->
    <!--                                 v-if="yysInfo.carrier_user_info">-->
    <!--                  <el-descriptions-item v-for="item in CUI"-->
    <!--                                        v-if="yysInfo.carrier_user_info[item.et]"-->
    <!--                                        :label="item.ct">-->
    <!--                    {{ yysInfo.carrier_user_info[item.et] }}-->
    <!--                  </el-descriptions-item>-->
    <!--                </el-descriptions>-->
    <!--              </td>-->
    <!--            </tr>-->
    <!--            <tr class="null">-->
    <!--              <td colspan="10"/>-->
    <!--            </tr>-->

    <!--            <tr class="data">-->
    <!--              <td colspan="10">通话详单</td>-->
    <!--            </tr>-->
    <!--            <tr class="data">-->
    <!--              <td colspan="10">-->
    <!--                <el-descriptions :column="5" border size="mini"-->
    <!--                                 v-if="yysInfo.calls"-->
    <!--                                 v-for="(DI,index) in yysInfo.calls">-->
    <!--                  <el-descriptions-item v-for="item in calls"-->
    <!--                                        v-if="DI[item.et]"-->
    <!--                                        :label="item.ct">-->
    <!--                    {{ DI[item.et] }}-->
    <!--                  </el-descriptions-item>-->
    <!--                </el-descriptions>-->
    <!--              </td>-->
    <!--            </tr>-->
    <!--            <tr class="null">-->
    <!--              <td colspan="10"/>-->
    <!--            </tr>-->

    <!--            <tr class="data">-->
    <!--              <td colspan="10">短信详单</td>-->
    <!--            </tr>-->
    <!--            <tr class="data">-->
    <!--              <td colspan="10">-->
    <!--                <el-descriptions :column="5" border size="mini"-->
    <!--                                 v-if="yysInfo.smses"-->
    <!--                                 v-for="(DI,index) in yysInfo.smses">-->
    <!--                  <el-descriptions-item v-for="item in smses"-->
    <!--                                        v-if="DI[item.et]"-->
    <!--                                        :label="item.ct">-->
    <!--                    {{ DI[item.et] }}-->
    <!--                  </el-descriptions-item>-->
    <!--                </el-descriptions>-->
    <!--              </td>-->
    <!--            </tr>-->
    <!--            <tr class="null">-->
    <!--              <td colspan="10"/>-->
    <!--            </tr>-->

    <!--            <tr class="data">-->
    <!--              <td colspan="10">流量详单</td>-->
    <!--            </tr>-->
    <!--            <tr class="data">-->
    <!--              <td colspan="10">-->
    <!--                <el-descriptions :column="5" border size="mini"-->
    <!--                                 v-if="yysInfo.nets"-->
    <!--                                 v-for="(DI,index) in yysInfo.nets">-->
    <!--                  <el-descriptions-item v-for="item in nets"-->
    <!--                                        v-if="DI[item.et]"-->
    <!--                                        :label="item.ct">-->
    <!--                    {{ DI[item.et] }}-->
    <!--                  </el-descriptions-item>-->
    <!--                </el-descriptions>-->
    <!--              </td>-->
    <!--            </tr>-->
    <!--            <tr class="null">-->
    <!--              <td colspan="10"/>-->
    <!--            </tr>-->

    <!--            <tr class="data">-->
    <!--              <td colspan="10">缴费信息</td>-->
    <!--            </tr>-->
    <!--            <tr class="data">-->
    <!--              <td colspan="10">-->
    <!--                <el-descriptions :column="5" border size="mini"-->
    <!--                                 v-if="yysInfo.recharges"-->
    <!--                                 v-for="(DI,index) in yysInfo.recharges">-->
    <!--                  <el-descriptions-item v-for="item in recharges"-->
    <!--                                        v-if="DI[item.et]"-->
    <!--                                        :label="item.ct">-->
    <!--                    {{ DI[item.et] }}-->
    <!--                  </el-descriptions-item>-->
    <!--                </el-descriptions>-->
    <!--              </td>-->
    <!--            </tr>-->
    <!--            <tr class="null">-->
    <!--              <td colspan="10"/>-->
    <!--            </tr>-->

    <!--            <tr class="data">-->
    <!--              <td colspan="10">账单信息</td>-->
    <!--            </tr>-->
    <!--            <tr class="data">-->
    <!--              <td colspan="10">-->
    <!--                <el-descriptions style="padding-bottom: 5px;"-->
    <!--                                 :column="5" border size="mini"-->
    <!--                                 v-if="yysInfo.bills"-->
    <!--                                 v-for="(DI,index) in yysInfo.bills">-->
    <!--                  <el-descriptions-item v-for="item in bills"-->
    <!--                                        v-if="DI[item.et]"-->
    <!--                                        :label="item.ct">-->
    <!--                    {{ DI[item.et] }}-->
    <!--                  </el-descriptions-item>-->
    <!--                </el-descriptions>-->
    <!--              </td>-->
    <!--            </tr>-->
    <!--            <tr class="null">-->
    <!--              <td colspan="10"/>-->
    <!--            </tr>-->

    <!--            <tr class="data">-->
    <!--              <td colspan="10">套餐信息</td>-->
    <!--            </tr>-->
    <!--            <tr class="data" v-if="yysInfo.packages" v-for="(DI,index) in yysInfo.packages">-->
    <!--              <td>{{ DI.billStartDate }}</td>-->
    <!--              <td>{{ DI.billEndDate }}</td>-->
    <!--              <td colspan="8">-->
    <!--                <el-descriptions :column="5" border size="mini"-->
    <!--                                 v-for="(DI_,index) in DI.items">-->
    <!--                  <el-descriptions-item v-for="item in packages"-->
    <!--                                        v-if="DI_[item.et]"-->
    <!--                                        :label="item.ct">-->
    <!--                    {{ DI_[item.et] }}-->
    <!--                  </el-descriptions-item>-->
    <!--                </el-descriptions>-->
    <!--              </td>-->
    <!--            </tr>-->
    <!--            <tr class="null">-->
    <!--              <td colspan="10"/>-->
    <!--            </tr>-->

    <!--            <tr class="data">-->
    <!--              <td colspan="10">亲情号码信息</td>-->
    <!--            </tr>-->
    <!--            <tr class="data">-->
    <!--              <td colspan="10">-->
    <!--                <el-descriptions :column="5" border size="mini"-->
    <!--                                 v-if="yysInfo.families"-->
    <!--                                 v-for="(DI,index) in yysInfo.families">-->
    <!--                  <el-descriptions-item v-for="item in families"-->
    <!--                                        v-if="DI[item.et]"-->
    <!--                                        :label="item.ct">-->
    <!--                    {{ DI[item.et] }}-->
    <!--                  </el-descriptions-item>-->
    <!--                </el-descriptions>-->
    <!--              </td>-->
    <!--            </tr>-->

    <!--            </tbody>-->
    <!--          </table>-->
    <!--        </div>-->
    <!--      </el-tab-pane>-->
    <!--    </el-tabs>-->
  </div>
</template>

<script>
  import {queryRecord} from "@/api/system/query";
  import {getBalance} from "@/api/system/user";
  import {
    CUI, calls, smses, nets, recharges,
    bills, packages, families, SQXXHY, YYSXX, JCXXSM
  } from "@/utils/yysParam"

  export default {
    name: "yys",
    props: {
      queryData: {
        required: true,
        type: Object
      },
      price: {
        required: true,
        type: Number
      },
      priceType: {
        required: true,
        type: Boolean
      },
      explain: {
        required: true,

      },
      data() {
        return {
          loading: false,
          el_card_style: {
            padding: '2px 0  0 10px',
            fontSize: '11px'
          },
          activeName: 'second',
          lock: false,
          msg: null,
          time: undefined,
          balance: undefined,
          yysInfo: undefined,
          yysReport: undefined,
          CUI,
          calls,
          smses,
          nets,
          recharges,
          bills,
          packages,
          families,
          SQXXHY,
          YYSXX,
          JCXXSM
        }
      },
      computed: {
        computePrice() {
          return this.price > this.balance ? '（余额不足）' : (this.zeroTwo(this.price) + (this.priceType ? '（默认价）' : '（定制价）'))
        }
      },
      created() {
        this.refreshBalance()
        this.loading = true
        queryRecord(this.queryData).then(response => {
          if (response.info) {
            this.time = response.time
            // let yysInfo = JSON.parse(response.data.yysInfo)
            // if (yysInfo.returnCode == "000000") {
            //   this.yysInfo = yysInfo.data
            //   console.log('--this.yysInfo--', this.yysInfo)
            // }
            let yysReport = JSON.parse(response.info).yysReport
            console.log('-yysReport-', yysReport)
            this.msg = yysReport.returnMsg
            if (yysReport.returnCode == "000000") {
              this.yysReport = yysReport.data
              console.log('--this.yysReport--', this.yysReport)
              this.lock = true
            }
          }
          this.loading = false
        })
      },
      methods: {
        getGather() {
          if (this.price > this.balance) {
            this.$bus.$emit('openPay')
          } else {
            this.$emit('openShare', '3')
          }
        },
        refreshBalance() {
          getBalance().then(response => {
            this.balance = response.data
          })
        }
      }
    }
  }
</script>

<style scoped>
  .title {
    text-align: center;
    line-height: 27.33px;
    font-size: 14px;
    margin: 0;
  }

  #explain {
    font-weight: bold;
    text-align: center;
    margin: 10px 0;
  }

  .ec {
    margin-top: 10px;
  }

  .he {
    color: #3A71A8;
    font-size: 12px;
  }

  .text {
    font-size: 11px;
  }

  .item {
    margin-bottom: 10px;
  }

  .sfhy {
    margin: 10px auto;
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
  }

  .data td {
    text-align: center;
    border: 1px solid #e2cfcf;
    padding: 5px 0px;
    background-color: #f5f5f5;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 10%;
  }

  .null td {
    text-align: center;
    /*border: 1px solid;*/
    padding: 5px 0px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 10%;
  }

  .el-row {
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
  }

  .el-row .el-card {
    min-width: 100%;
    height: 100%;
    margin-right: 20px;
    transition: all .5s;
  }

</style>
